<template>
    <div class="page-infinite-wrapper" :style="{ height: wrapperHeight + 'px' }">
        <div class="yousport-TeamHomePage" v-infinite-scroll="loadMore" infinite-scroll-immediate-check="false" infinite-scroll-disabled="isFinished" infinite-scroll-distance="10">

            <div class="yousport-background-wrapper" :class="{'yousport-frontcover-default':!backgroundImg.backgroundImage}" :style="backgroundImg" @click="changeBackgroundImg">
                <div v-if="!backgroundImg.backgroundImage && isAdmin" class="yousport-label">轻触设置背景</div>
                <span class="yousport-cover-tip" v-if="!backgroundImg.backgroundImage">暂未上传封面</span>
            </div>

            <div class="first-team-name"><span>{{deptName}}</span></div>
            <ysChart :labels="labels" :data="data" :showTip="showTip" :step="step" ></ysChart>

            <div class="team-cell"><span >今日部门成员步数</span></div>

            <ysPersonDepcell :perUrl="teamPerListUrl" :depId="depId"></ysPersonDepcell>

            <mt-actionsheet
                    :actions="actions"
                    v-model="sheetVisible">
            </mt-actionsheet>
        </div>
    </div>
</template>

<script>
    import ysPersonDepcell from '../component/ys-persondep.vue'
    import ysChart from '../component/ys-chart.vue'
    import config from '../assets/config'
    import util from '../assets/util'
    import bridge from '../bridge'

    export default{
        data(){
            return{
                labels:[],
                data:[],
                step:0,
                showTip:'今日步数',
                isFinished:false,
                changeBackgroundUrl: config.host + config.changeTeamHomePageBackgroundUrl,
                backgroundImg: {
                    backgroundImage:''
                },
                deptName: '',
                qzId: 0,

                isAdmin: false,
                sheetVisible: false,

                teamPerListUrl:config.host + config.deptRank,
                depId:''
            }
        },
        watch:{
            depId() {
                this.isFinished = false;
            }
        },
        methods:{
            resumeScroll() {
                var scrollTop = util.session.get('team-home-scroll');
                if(scrollTop) {
                    document.querySelector('.page-infinite-wrapper').scrollTop = scrollTop;
                }

            },
            loadMore() {
                if(!this.isFinished) {
                    this.$eventBus.$emit('TeamLoadMore');
                }

            },
            initHeader() {
                bridge.client.configNavBar(function () {

                }, {centerItems:[{title:'友运动'}],rightItems:[]});
            },

            initChart() {
                let depId = this.depId;
                let me = this;
                this.$http.get(config.host+config.getSevenDayTeamStep, {
                    params:{
                        depId:depId
                    }
                }).then((res)=> {

                    this.step = res.data.today.stepAvg;
                    this.isAdmin = res.data.isLeader;
                if (res.data.today.frontCover) {
                        this.backgroundImg = {
                            backgroundImage:'url('+ res.data.today.frontCover +')'
                        };
                    }

                    let labels = [];
                    let stepData = [];
                    let list = res.data.list;
                    if(list.length) {
                        list.forEach((item, index)=> {
                            let date = new Date(item.createTime);
                            if(index + 1 === list.length){
                                labels.push(date.getMonth() + 1 + '月' + date.getDate());
                            } else {
                                labels.push(date.getDate());
                            }
                            stepData.push(item.stepAvg);

                        });
                        me.labels = labels.reverse();
                        me.data = stepData.reverse();
                    }

                })
            },

            changeTeamHomePageBackgroundImg(frontCover) {
                let me = this;
                this.$http.post(this.changeBackgroundUrl,
                    {frontCover: frontCover,
                     depId: me.depId,
                     qzId: me.qzId}
                ).then((res)=>{
                    if (res.data.code == 0) {
                        me.backgroundImg = {
                            backgroundImage:'url('+ frontCover +')'
                        };
                    } else {
                        Toast('修改失败');
                    }
                }).catch((res) => {
                    Toast('修改失败');
                });
            },
            changeBackgroundImg() {
                if(this.isAdmin) {
                    this.sheetVisible = true;
                }

            },
            uploadImg(){
                let me = this;
                yyesn.client.selectAttachment((d)=>{
                    if (d.data[0].path) {
                        me.changeTeamHomePageBackgroundImg(d.data[0].path);
                    }
                },{
                    type:'1',
                    maxselectnum:'1'
                })
            },
            camera(){
                let me = this;
                yyesn.client.selectAttachment(function (d) {
                    me.changeTeamHomePageBackgroundImg(d.data[0].path);
                },{
                    type:'4',
                    maxselectnum:'1'
                })
            },
            initEvent() {
                this.$eventBus.$on('team-loadComplete', ()=>{
                    this.isFinished = true;
                })
            }
        },
        mounted() {
            let me = this;
            this.wrapperHeight = document.documentElement.clientHeight;
            this.initEvent();

        },
        beforeRouteLeave(to, from, next){
            var scrollTop = document.querySelector('.page-infinite-wrapper').scrollTop;
            util.session.set('team-home-scroll', scrollTop);
            next();
        },
        beforeRouteEnter(to, from, next) {
            if(from.path === '/otherHomePage') {
                next((vm)=> {
                    vm.resumeScroll();
                })
            } else {
                next();
            }

        },
        activated(){
            this.initHeader();

            var res = util.session.get('dep-row-data');

            this.qzId = util.session.get("sport-user-info").szId;

            if (res.name) {
                this.deptName = res.name;
            }
            if (res.depId) {
                this.depId = res.depId;
            }
            if (res.frontCover) {
                this.backgroundImg = {
                        backgroundImage:'url('+ res.frontCover +')'
                };
            } else {
                this.backgroundImg.backgroundImage = '';
            }

            this.actions = [{
                name:'拍照',
                method:this.camera
            },{
                name:'相册',
                method:this.uploadImg
            }]
            this.initChart();
        },

        //难点
        beforeRouteUpdate (to, from, next) {

            this.initData();

            this.initChart();

            this.isFinished = false;

            var res = util.session.get('dep-row-data');

            if (res.name) {
                this.deptName = res.name;
            }
            if (res.frontCover) {
                this.backgroundImg  = res.frontCover;
            }

            this.actions = [{
                name:'拍照',
                method:this.camera
            },{
                name:'相册',
                method:this.uploadImg
            }]

            next();
        },

        components:{
            ysPersonDepcell , ysChart
        }
    }
</script>

<style>

    .yousport-TeamHomePage{
    }
    .yousport-TeamHomePage .first-team-name{
        margin-top: 14px;
        text-align: center;
        color: #262626;
        font-size: 16px;
    }
    .yousport-TeamHomePage .team-cell{
        margin-top: 22px;
        margin-left: 12px;
        text-align: left;
        color: #9E9E9E;
        font-size: 13px;
    }
    .yousport-TeamHomePage .test{
        width: 375px;
        height: 218px;
    }
    .yousport-TeamHomePage .chart{
        background-color: red;
        width: 325px;
        height: 200px;
        margin: 16px 25px 22px 25px;
    }
</style>
